<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href='http://fonts.font.im/css?family=Sansita+One' rel='stylesheet' type='text/css'>
    <link href='http://fonts.font.im/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link href='http://fonts.font.im/css?family=Limelight' rel='stylesheet' type='text/css'>
    <link href='http://fonts.font.im/css?family=Candal' rel='stylesheet' type='text/css'>
    <script src="https://at.alicdn.com/t/font_794763_agikgjl7di7.js"></script>
    <style>
        .primary{color: #1abc9c;font-family: 'Sansita One', cursive;}
        .logo{font-size: 80px;margin: 10px 0px 10px 100px;}
        span{margin: -5px;padding: 0px;}
        .d,.h{color: #4285f4;}
        .o,.b{color: #ea4335;}
        .c{color: #fbbc05;}
        .u{color: #34a853;}
        /*----------*/
        .logo1{font-family: 'Sansita One', cursive;}
        .logo2,.logo4{font-family: 'Lobster', cursive;}
        .logo2 .o,.logo2 .c{color: #34495e;font-family: 'Limelight', cursive;}
        .logo2 .h,.logo2 .u,.logo2 .b{font-family: 'Sansita One', cursive;}
        .logo2 .d{font-family: 'Limelight', cursive;}
        .logo3{font-family: 'Limelight', cursive;}
        .logo5{font-family: 'Candal', sans-serif;}
        .iconfont{
            font-family:"iconfont" !important;
            font-size:16px;font-style:normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;}
    </style>
</head>
<body>

<div class="logo logo1">
    <span class="d">D</span>
    <span class="o">o</span>
    <span class="c">c</span>
    <span class="h">H</span>
    <span class="u">u</span>
    <span class="b">b</span>
</div>
<div class="logo logo2">
    <span class="d">D</span>
    <span class="o">o</span>
    <span class="c">c</span>
    <span class="h">H</span>
    <span class="u">u</span>
    <span class="b">b</span>
</div>
<div class="logo logo3">
    <span class="d">D</span>
    <span class="o">o</span>
    <span class="c">c</span>
    <span class="h">H</span>
    <span class="u">u</span>
    <span class="b">b</span>
</div>
<div class="logo logo4">
    <span class="d">D</span>
    <span class="o">o</span>
    <span class="c">c</span>
    <span class="h">H</span>
    <span class="u">u</span>
    <span class="b">b</span>
</div>
<div class="logo logo5">
    <span class="d">D</span>
    <span class="o">o</span>
    <span class="c">c</span>
    <span class="h">H</span>
    <span class="u">u</span>
    <span class="b">b</span>
    <span>icon-book1</span>
    <i class="iconfont">&#x33;</i>

</div>
</body>
</html>